<template>
    
    <div class="login-view">
        <form id="from">
            <div class="header-nav">
                <button-tab>
                    <button-tab-item selected @on-item-click="handleClick">我是学员</button-tab-item>
                    <button-tab-item @on-item-click="handleClick">我是教练</button-tab-item>
                </button-tab>
            </div>
            <group label-width="3em" label-align="left">
                <x-input :max='11' @on-blur="handleBlur" @on-focus="handleFocus" type="tel" title="手机" v-model="mobile.val" novalidate :icon-type="mobile.iconType" ref="mobile" name="mobile" placeholder="请输入手机号码" is-type="china-mobile" required></x-input>
            </group>
            <group label-width="3em" label-align="left">
                <x-input @on-blur="handleBlur" @on-focus="handleFocus" type="text" title="密码" v-model="password.val" novalidate :icon-type="password.iconType" ref="password" name="password" placeholder="请输入密码" :is-type="password.validPwd" required></x-input>
            </group>
            
            <div class="forget">
              <router-link :to="{ path: '/forgetPwd', query: {type: this.type} }">忘记密码?</router-link>
              </div>
            <div style="margin-top: 1.5em;">
                <template v-if="type == 0">
                  <flexbox>
                    <flexbox-item>
                    <x-button action-type="button" type="primary" :show-loading="isLoading" @click.native="submitData">登录</x-button>
                    </flexbox-item>
                    <flexbox-item>
                    <x-button action-type="button" type="warn">注册</x-button>
                    </flexbox-item>
                  </flexbox>
                </template>
                <x-button v-else action-type="button" type="primary" :show-loading="isLoading" @click.native="submitData">登录</x-button>
            </div>
        </form>
    </div>
</template>

<script>
import { Group, XInput, XButton, Flexbox, FlexboxItem, ButtonTab, ButtonTabItem, Toast } from 'vux'
export default {
  name: 'Login',
  components: {
    Group,
    XInput,
    XButton,
    Flexbox,
    FlexboxItem,
    ButtonTab,
    ButtonTabItem,
    Toast
  },
  data () {
    return {
      type: 0,
      isLoading: false,
      mobile: {
        val: '',
        iconType: ''
      },
      password: {
        val: '',
        validPwd: function (value) {
          return {
            valid: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(value),
            msg: '密码格式错误，必须为6-16个字符(包含字母+数字)!'
          }
        },
        iconType: ''
      },
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    handleClick: function (index) {
      this.type = index
    },
    submitData: function () {
      if(!this.$refs.mobile.valid) {
        this.$vux.toast.text(this.$refs.mobile.errors.format || '手机号码不能为空')
        return false;
      } 
      if(!this.$refs.password.valid) {
        this.$vux.toast.text(this.$refs.password.errors.format || '请输入您的密码')
        return false;
      }
      this.isLoading = true
      this.$store.dispatch('login', {type: this.type, mobile: this.mobile.val, password: this.password.val})
      .then(() => {
        this.$router.push({ path: this.redirect || '/' })
        this.isLoading = false
      }).catch(err => {
        this.isLoading = false
        console.log(err)
      })
      
    },
    handleBlur: function (value, $event) {
      const target = $event.target.name
      if (target === 'mobile') {
        const validResult = this.$refs.mobile.valid
        if (!validResult) {
          this.$vux.toast.text(this.$refs.mobile.errors.format || '手机号码不能为空')
          this.mobile.iconType = 'error'
        } else {
          this.mobile.iconType = 'success'
        }
      } else if (target === 'password') {
        const validResult = this.$refs.password.valid
        if (!validResult) {
          this.$vux.toast.text(this.$refs.password.errors.format || '请输入您的密码')
          this.password.iconType = 'error'
        } else {
          this.password.iconType = 'success'
        }
      }
    },
    handleFocus: function (value, $event) {
      const target = $event.target.name
      if (target === 'mobile') {
        this.mobile.iconType = ''
      } else if (target === 'password') {
        this.password.iconType = ''
      }
    }
  }
}
</script>

<style scoped lang="less">
.login-view {
    width: 85%;
    margin: 0 auto;
    margin-top: 5em;

    /deep/ .weui-cells {
        border-radius: 10px;
        border: 1px solid #ccc;
        outline:none;
    }

    .forget {text-align: right; margin-top: 10px;}
}
</style>
